<template>
  <div class="app-container">
    <el-card>
      <!-- header start -->
      <div class="header flex justify-between align-center">
        <div class="tab">
          <div class="item" v-for="item in tabList" :key="item.title">
            {{ item.title + `（${item.num}）` }}
          </div>
        </div>
        <el-button type="primary" @click="handleAdd">新增平台企业主</el-button>
      </div>
      <!-- header end -->

      <!-- search start -->
      <search-form
        v-model="formOption.data"
        :form-option="formOption"
        :show-btn="true"
        :btn-list="btnList"
        label-width="100px"
        class="mt-30"
      />
      <!-- search end -->

      <!-- list start -->
      <PageTable :data="dataSource" :columns="columns" :options="options" />
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="formData.pageNo"
        :pageSize.sync="formData.pageSize"
        :pageSizes="[10, 20, 30, 50, 100, 200, 500]"
        @pagination="handleLoad"
      />
      <!-- list end -->
    </el-card>
  </div>
</template>

<script>
// 平台列表
import { platformList } from './list'
export default {
  data() {
    return {
      // 入住状态tab
      tabList: [{ title: '已入驻', num: 12 }],

      // 列表请求参数
      formData: {
        pageNo: 1,
        pageSize: 10,
        startTime: '',
        endTime: '',
        platform: ''
      },

      // 总条数
      total: 10,

      // 搜索表单配置
      formOption: {
        data: {
          platform: '',
          registerTime: []
        },
        items: [
          {
            type: 'daterange',
            label: '入驻时间',
            value: 'registerTime',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          },
          {
            type: 'select',
            label: '企业名称',
            value: 'platform',
            clearable: true,
            selectList: platformList
          }
        ]
      },

      // 表单按钮配置
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.formData.pageNo = 1
            this.handleSearch()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = { platform: '', registerTime: [] }
            this.handleSearch()
          }
        }
      ],

      // 表格数据
      dataSource: [],

      // 表头
      columns: [
        {
          prop: 'id',
          label: 'ID',
          width: 100
        },
        {
          prop: 'id',
          label: '平台信息',
          width: 300,
          render: (h, { row }) => {
            return (
              <div class="userInfo">
                <img
                  style={'width: 60px;height: 60px;'}
                  src={row.logo}
                  previewSrcList={[row.logo]}
                />
                <div>
                  <div class="ml-10 flex flex-col justify-between">{row.touchName}</div>
                  <div class="ml-10 flex flex-col justify-between">{row.touchMobile}</div>
                </div>
              </div>
            )
          }
        },
        {
          prop: 'mainBusiness',
          label: '主营业务',
          width: 100
        },
        {
          prop: 'id',
          label: '平台性质',
          width: 100,
          render: (h, { row }) => {
            return <div class="flex">第三方平台</div>
          }
        },
        {
          prop: 'supportIntegral',
          label: '支入积分',
          width: 100
        },
        {
          prop: 'transitionMember',
          label: '转换会员数',
          width: 100,
          render: (h, { row }) => {
            return <div>{row.transitionMember || 0}</div>
          }
        },
        {
          prop: 'exchangeOrder',
          label: '兑换订单数',
          width: 100,
          render: (h, { row }) => {
            return <div>{row.exchangeOrder || 0}</div>
          }
        },
        {
          prop: 'id',
          label: '兑换比列',
          width: 100,
          render: (h, { row }) => {
            return <div class="flex">1:{row.exchangeRate}(好物积分)</div>
          }
        },
        {
          prop: 'createdTime',
          label: '入驻时间',
          width: 100
        },
        {
          prop: 'id',
          label: '帐号状态',
          width: 100,
          render: (h, { row }) => {
            return <div class="flex">{row.status == 1 ? '正常' : '冻结'}</div>
          }
        },
        {
          label: '操作',
          width: 100,
          render: (h, { row }) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.handleSee(row.id)}>
                  查看
                </el-button>
                <el-button type="text" onClick={() => this.handleEdit(row.id)}>
                  编辑
                </el-button>
              </div>
            )
          }
        }
      ],

      // 表格配置
      options: {
        border: false,
        select: false
      }
    }
  },
  created() {
    this.handleLoad()
  },
  methods: {
    // 表单搜素
    handleSearch() {
      this.handleLoad()
    },

    // 获取表格数据
    async handleLoad() {
      const { formData, formOption } = this
      const params = {
        ...formData,
        startTime: formOption.data.registerTime[0] || '',
        endTime: formOption.data.registerTime[1] || '',
        platform: formOption.data.platform || ''
      }
      const { data } = await this.$http.user.platformFirm.list({ params })
      this.dataSource = data.records
      this.total = data.total
      this.tabList[0].num = data.total
    },

    // 查看详情
    handleSee(id) {
      this.$router.push({ name: 'FirmDetail', query: { id } })
    },

    // 编辑
    handleEdit(id) {
      this.$router.push({ path: '/user/platform_Firm/firm-edit', query: { id } })
    },

    // 新增
    handleAdd() {
      this.$router.push({ path: '/user/platform_Firm/firm-add' })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  .item {
    padding: 15px 10px;
    background-color: #0a82f3;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
  }
}
.userInfo {
  display: flex;
}
</style>
